<template>
  <div>
    <div class="dialog-container">
      <el-divider><strong style="font-size: 20px;">前端列表咨询</strong></el-divider>

      <div v-for="(message, index) in messages" :key="index" class="message-wrap">
        <!-- 问题在右边 -->

        <div v-if="message.question" class="message-content message-right">{{ message.question }}</div>
        <!-- 答案在左边 -->
        <div v-if="message.answer" class="message-content message-left">{{ message.answer }}</div>
      </div>
    </div>
    <div style=" position: absolute;width: 80%; bottom: 5vh;margin-left: 25px;">
      <div>
        <el-input type="textarea" :rows="6" v-model="consultMessage" style="width: 100%;height: 20vh"
          placeholder="请输入咨询问题，机构管理员会为您解答！">
        </el-input>
      </div>
      <el-button type="primary" style="float: right;right: 2vh" @click="sendMessages">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getConsultForUser, sendMessage } from "@/api/consult";

export default {
  data() {
    return {
      consultMessage: '',
      messages: [],
    };
  },
  methods: {
    sendMessages() {
      sendMessage(this.consultMessage).then((res) => {
        if (res.data.code === 1) {
          this.consultMessage = "";
          this.getConsultsForUser();
        }
      }).catch((e) => { })
    },
    getConsultsForUser() {
      getConsultForUser().then((res) => {
        console.log(res)
        if (res.data.code === 1) {

          this.messages = res.data.data;
          console.log(this.messages);

        }
      }).catch((e) => {
      })
    }
  },
  mounted() {
    this.getConsultsForUser();
  },
};
</script>

<style>
.dialog-container {
  max-height: 50vh;
  overflow-y: auto;
  width: 95%;
  padding: 20px;
}


.message-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 默认对齐方式为左对齐 */

}

.message-left {
  align-self: flex-start;
  /* 答案靠左 */
  margin-right: auto;
  background-color: gainsboro;
  border-width: 6px;
  border-style: solid;
  border-color: gainsboro;
  position: relative;
  /* 添加右边距，让答案有间距 */
}

.message-right {
  align-self: flex-end;
  /* 问题靠右 */
  margin-left: auto;
  /* 添加左边距，让问题有间距 */
  background-color: #b2e281;
  border-width: 6px;
  border-style: solid;
  border-color: #b2e281;
  position: relative;

  /* 绿色背景 */
}

.message-content {

  padding: 10px;
  border-radius: 5px;
  max-width: 70%;
  word-wrap: break-word;
  margin-bottom: 10px;
  /* 添加底部间距 */

}
</style>
